<template>
  <!-- 抽奖转盘页面 -->
  <div class="container">

    <!-- 1.标题 + 圆形转盘 -->
    <div class="lucky-wheel">
      <van-icon name="arrow-left" @click="goLuckyDraw()"/>
      <!-- 1.1 转盘上的标题 -->
      <div class="lucky-title"></div>
      <!--1.2 圆形转盘 -->
      <div class="wheel-main">
        <!-- 指针 -->
        <div class="wheel-pointer-box" id="wheel-pointer-box-click">
          <div class="wheel-pointer" id="wheel-pointer-click" @click="flag && rotate_handle()" :style="{transform:rotate_angle_pointer,transition:rotate_transition_pointer}"></div>
        </div>
        <!-- 圆盘 -->
        <div class="wheel-bg" :style="{transform:rotate_angle,transition:rotate_transition}">
          <!-- 奖品数据列表-->
          <div class="prize-list">
            <!-- 遍历奖品列表 -->
            <div class="prize-item" v-for="(item,index) in prize_list" :key="index">
              <!-- 奖品的图 -->
              <div class="prize-pic">
                <img :src="item.icon">
              </div>
              <!-- 豆子的数量 -->
              <div class="prize-prize_amount" v-if="item.prize_amount">
                {{item.prize_amount}}
              </div>
              <!-- 哪种豆子 -->
              <div class="prize-type">
                {{item.prize_name}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 2.圆形转盘下面的说明信息 -->
    <div class="main">
      <!-- -->
      <div class="main-bg"></div>
      <div class="bg-p"></div>
      <div class="content">
        <!--<div class="lottery_ticket">今日免费抽奖次数： {{ lottery_ticket}}</div>-->
      </div>
      <div class="tip">
        <div class="tip-title">活动规则</div>
        <div class="tip-content">
          <p> 1.每次抽奖将会扣除50个积分。</p>
        </div>
      </div>
      <!-- 我的中奖记录 -->
      <div class="my-prize-log">
        <div class="my-prize-log-title">我的中奖记录</div>
        <div class="my-prize-log-item">

          <p>序号</p>
          <p>奖品</p>
          <p>中奖时间</p>
        </div>
        <div class="my-prize-log-item1" >
          <ul>
            <li v-for="(item,index) in prize_log_list" :key="index">
              <p>{{index+1}}</p><!-- 序号-->
              <p>{{item.prize_name}}</p><!-- 中奖内容 -->
              <p>{{item.win_time}}</p><!-- 中奖时间 -->
            </li>
          </ul>
        </div>
      </div>
    </div>


    <!-- 3 .中奖后的弹出层-->
    <div class="toast" v-show="toast_control">
      <div class="toast-container">
        <img :src="toast_pictrue" class="toast-picture">
        <div class="close" @click="close_toast()"></div>
        <div class="toast-title">
          {{toast_title}}
        </div>
        <div class="toast-btn">
          <div class="toast-cancel"  @click="close_toast">关闭</div>
        </div>
      </div>
    </div>

    <!-- 4.抽奖结果弹出框控制器 -->
    <div class="toast-mask" v-show="toast_control"></div>

    <!-- 5 .没中奖的弹出层-->
    <div class="toast" v-show="toast_control_nopass">
      <div class="toast-container">
        <img :src="toast_pictrue" class="toast-picture">
        <div class="close" @click="close_toast_nopass()"></div>
        <div class="toast-title">
          {{toast_title_nopass}}
        </div>
        <div class="toast-btn">
          <div class="toast-cancel"  @click="close_toast_nopass">关闭</div>
        </div>
      </div>
    </div>

    <!-- 6.抽奖结果弹出框控制器 -->
    <div class="toast-mask" v-show="toast_control_nopass"></div>

  </div>
</template>

<script>
  // import {getCookie, setCookie,authorLogin} from "../../utils/util";
  export default {
    name:'luckyDraw',
    data() {
      return {
        easejoy_bean: 0, //金豆
        lottery_ticket: 0, //抽奖次数
        prize_log_list:[],
        //请务必保证奖品与数据库的奖品一致，prize_name和prize_amount两个参数保持一致即可，icon是图片地址
        prize_list: [
          {
            icon: require("../../static/luckyDraw/ipx.png"), // 奖品图片
            prize_amount: 1, // 奖品数量
            prize_name: "台iPhoneX", // 奖品名称
            hasPrize:1,//是否是奖品

          },
          {
            icon: require("../../static/luckyDraw/bean_five.png"),
            prize_amount: 1.58,
            prize_name: "STC",
            hasPrize:1,//是否是奖品
          },
          {
            icon: require("../../static/luckyDraw/point_five.png"),
            prize_amount: 50,
            prize_name: "积分",
            hasPrize:1,//是否是奖品
          },
          {
            icon: require("../../static/luckyDraw/bean_one.png"),
            prize_amount: 15.8,
            prize_name: "STC",
            hasPrize:1,//是否是奖品
          },
          {
            icon: require("../../static/luckyDraw/give_up.png"),
            prize_amount: 0,//未中奖一定要设置这个参数为0
            prize_name: "未中奖",
            hasPrize:0,//是否是奖品
          },
          {
            icon: require("../../static/luckyDraw/bean_5001.png"),
            prize_amount: 21.8,
            prize_name: "红包",
            hasPrize:1,//是否是奖品
          },
          {
            icon: require("../../static/luckyDraw/point_ten.png"),
            prize_amount: 200,
            prize_name: "积分",
            hasPrize:1,//是否是奖品
          },
          {
            icon: require("../../static/luckyDraw/bean_5002.png"),
            prize_amount: 2.8,
            prize_name: "红包",
            hasPrize:1,//是否是奖品
          }
        ], //奖品列表
        toast_control: false, //抽奖结果弹出框控制器
        toast_control_nopass: false, //没抽奖资格结果弹出框控制器
        hasPrize: false, //是否中奖
        hasPrize_nopass: "积分不足，不能抽奖", //默认的没中奖提示信息
        start_rotating_degree: 0, //初始旋转角度
        rotate_angle: 0, //将要旋转的角度
        start_rotating_degree_pointer: 0, //指针初始旋转角度
        rotate_angle_pointer: 0, //指针将要旋转的度数
        rotate_transition: "transform 6s ease-in-out", //初始化选中的过度属性控制
        rotate_transition_pointer: "transform 12s ease-in-out", //初始化指针过度属性控制
        click_flag: true, //是否可以旋转抽奖
        flag: true, //是否可以马上点击第二次
        index: 0
      };
    },
    mounted() {
      console.warn("title:幸运大转盘"); //andriod监听方法，勿删除
    },
    created() {
      this.init_prize_list();
      this.init_prize_log_list();

    },
    computed: {
      toast_title() {
        return this.hasPrize
          ? "恭喜您，获得" +this.prize_list[this.index].prize_amount + ' ' + this.prize_list[this.index].prize_name
          : "未中奖";
      },
      toast_title_nopass() {
        return this.hasPrize_nopass;
      },
      toast_pictrue() {
        return this.hasPrize
          ? require("../../static/luckyDraw/congratulation.png")
          : require("../../static/luckyDraw/sorry.png");
      }
    },
    methods: {
      goLuckyDraw() {
        let u = navigator.userAgent;
        let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isAndroid) {
          console.warn("finish");
        } else if (isiOS) {
          window.webkit.messageHandlers.tourismBackToApp.postMessage(null);
        }
      },
      //此方法为处理奖品数据，保留下面注释的代码
      init_prize_list() {
        //暂时不实现该功能，前台写死商品，需要和数据库奖品保持一致
//        var that = this
//        this.$ajax({
//          method:"get",
//          url: '/api/common/v1/prize/prizeList',//拿到所有奖品
//          headers:{
//            'Content-Type':'application/x-www-form-urlencoded'
//          }
//        }).then(res=>{
//          //that.prize_list = res.data//从后台获得的商品放在前台展示,暂时不实现该功能
//          console.log("-----that.prize_list------",that.prize_list)
//          console.log("-----res.data------",res.data.data)
//        }).catch(res=>{
//          this.$message({
//            message: '出错了！',
//            type: 'error'
//          });
//        })
      },
      //初始化中奖列表
      init_prize_log_list() {
        var that = this
        var userId=this.$cookies.get("user_id") || localStorage.getItem("user_id")

        $.ajax({
          method:"get",
//          url: 'http://192.168.1.6:8080/sl/api/common/v1/prizeLog/selectPrizeLogByUserId?user_id='+userList.userId,//拿到所有奖品
          url: 'http://pay.zjc158.com/searched-api/api/common/v1/prizeLog/selectPrizeLogByUserId?user_id='+userId,//拿到所有奖品
          async: false,
          headers:{
            'Content-Type':'application/x-www-form-urlencoded'
          }
        }).then(res=>{
          that.prize_log_list = res.data//从后台获得的商品放在前台展示,暂时不实现该功能
          console.log("-----that.prize_log_list------",that.prize_log_list)
        }).catch(res=>{
          this.$message({
            message: '出错了！',
            type: 'error'
          });
        })
      },
      //点击“指针”抽奖
      rotate_handle() {
        //点击一次后立即禁用点击指针
        this.flag=false
        //后台返回中奖的随机数--------------------------------------------------------------------1
        var _this = this
        var userId=this.$cookies.get("user_id") || localStorage.getItem("user_id")

        console.log("------userList.userId-----",userId)

        //如果不为空就发送ajax请求
        var token = this.$cookies.get("token")||localStorage.getItem('token');
          let u = navigator.userAgent;
          let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
          let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
          if (!token) {
            if (isAndroid) {
              console.warn("ecologylogin");
            } else if (isiOS) {
              window.webkit.messageHandlers.goBackLogin.postMessage(null);
            }
        }else {
          $.ajax({
            method: "get",
            url: 'http://pay.zjc158.com/searched-api/api/common/v1/prize/clickDrawPrize?user_id='+userId,//后台会先判断是否有抽奖资格，没有资格返回-1，有资格产生随机商品，
//          url: 'http://192.168.1.6:8080/sl/api/common/v1/prize/clickDrawPrize?user_id='+userList.userId,//后台会先判断是否有抽奖资格，没有资格返回-1，有资格产生随机商品，
            async: false,
            dataType: "json",
          }).then(res=>{
            _this.index = res.data //后台返回值，如果为-1就提示没抽奖资格。如果为正数，该值代表指定每次旋转到的奖品下标。
            //判断是否具有抽奖资格
            if(res.success){
              //有抽奖资格，开始写数据
              this.writedata();
            }else {
              var that = this
              //设置提示信息
              that.hasPrize_nopass = res.msg
              //打开没资格抽奖的弹框
              that.game_over_nopass()
            }
          }).catch(res=>{
            this.$toast('出错了');
          })
        }
      },
      writedata(){
        //将中奖的数据传给后台：①中奖人id ：userId ②奖品id：prize_id（index）
        let this_ = this;
        var userId=this.$cookies.get("user_id") || localStorage.getItem("user_id")
        var token = this.$cookies.get("token")||localStorage.getItem('token');
        let u = navigator.userAgent;
        let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (!token) {
          if (isAndroid) {
            console.warn("ecologylogin");
          } else if (isiOS) {
            window.webkit.messageHandlers.goBackLogin.postMessage(null);
          }
        }else {
          $.ajax({
            url: "http://pay.zjc158.com/searched-api/api/common/v1/prizeLog/insertPrizeLog?user_id="+userId,//在中奖记录添加数据
//          url: "http://192.168.1.6:8080/sl/api/common/v1/prizeLog/insertPrizeLog?user_id="+userList.userId,//在中奖记录添加数据
            method: 'GET',
            data: {
              'prize_id': this_.index + 1,//奖品id为该索引加1，完美版是根据索引拿到奖品的信息，可优化
            },
            dataType: "json",
            async: false,
          }).then(res => {
            console.log("-----res1------", res)
            //写数据成功再转转盘
            if (res.success) {
              //转转盘
              this.rotating();
              console.log("-----this.index------", this.index)
            } else {
              var that = this
              //设置提示信息
              that.hasPrize_nopass = res.msg
              //打开没资格抽奖的弹框
              that.game_over_nopass()
              //解除不能马上第二次点击
              that.f_click_flag();
            }
          }).catch(res => {
            this.$toast('出错了');
          })
        }
      },
      //转转盘
      rotating() {
        if (!this.click_flag) return;
        var type = 0; // 默认为 0  转盘转动 1 箭头和转盘都转动(暂且遗留)
        var during_time = 5; // 默认为1s
        var random = Math.floor(Math.random() * 7);
        var result_index = this.index ; // 最终要旋转到哪一块，对应prize_list的下标
        var result_angle = [337.5, 292.5, 247.5, 202.5, 157.5, 112.5, 67.5, 22.5]; //最终会旋转到下标的位置所需要的度数
        var rand_circle = 6; // 附加多转几圈，2-3
        this.click_flag = false; // 旋转结束前，不允许再次触发
        if (type == 0) {
          // 转动盘子
          var rotate_angle =
            this.start_rotating_degree +
            rand_circle * 360 +
            result_angle[result_index] -
            this.start_rotating_degree % 360;
          this.start_rotating_degree = rotate_angle;
          this.rotate_angle = "rotate(" + rotate_angle + "deg)";
          // // //转动指针
          // this.rotate_angle_pointer = "rotate("+this.start_rotating_degree_pointer + 360*rand_circle+"deg)";
          // this.start_rotating_degree_pointer =360*rand_circle;
          var that = this;
          // 旋转结束后，允许再次触发
          setTimeout(function() {
            //解除禁用点击指针
            that.click_flag = true;
            //解除禁用点击指针
            that.f_click_flag();
            //打开抽奖弹框
            that.game_over();
          }, during_time * 1000 + 1500); // 延时，保证转盘转完
        } else {
          //
        }
      },
      //打开抽奖弹框
      game_over() {
        this.toast_control = true;
        this.hasPrize = this.prize_list[this.index].prize_amount
      },
      //打开没资格抽奖弹框
      game_over_nopass() {
        this.toast_control_nopass = true;
      },
      f_click_flag(){
        this.flag = true;
      },
      //关闭抽奖弹窗
      close_toast() {
        //解除不能马上第二次点击
        this.flag = true
        this.toast_control = false;
        //重新获得奖品记录
        this.init_prize_log_list();
      },
      //关闭没资格抽奖弹窗
      close_toast_nopass() {
        //解除不能马上第二次点击
        this.flag = true
        this.toast_control_nopass = false;
      }
    }
  };
</script>

<style scoped>
  .container {
    width: 100%;
  }
  .lucky-wheel {
    width: 100%;
    height: 6.4rem;
    background: rgb(252, 207, 133) url("../../static/luckyDraw/color_pillar.png") no-repeat
    center bottom;
    background-size: 100%;
    padding-top:0.1rem;
  }
  .lucky-wheel i{font-size: 0.2rem;padding: 0 0.1rem 0.2rem;color: #fff;}
  .lucky-title {
    width: 100%;
    height: 1rem;
    background: url("../../static/luckyDraw/lucky_title.png") no-repeat center top;
    background-size: 100%;
    margin-bottom: 0.2rem;
  }
  .wheel-main {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .wheel-bg {
    width: 3.4rem;
    height:3.4rem;
    background: url("../../static/luckyDraw/draw_wheel.png") no-repeat center top;
    background-size: 100%;
    color: #fff;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    transition: transform 3s ease;
  }
  .wheel-pointer-box {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, -60%);
    width: 1rem;
    height: 1rem;
  }
  .wheel-pointer {
    width: 1rem;
    height: 1rem;
    background: url("../../static/luckyDraw/draw_btn.png") no-repeat center top;
    background-size: 100%;
    transform-origin: center 60%;
  }
  .wheel-bg div {
    text-align: center;
  }
  .prize-list {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .prize-list .prize-item {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .prize-list .prize-item:first-child {
    top: 0.32rem;
    left: 1.75rem;
    transform: rotate(20deg);
  }
  .prize-list .prize-item:nth-child(2) {
    top:0.9rem;
    left:2.4rem;
    transform: rotate(67deg);
  }
  .prize-list .prize-item:nth-child(3) {
    top: 1.75rem;
    left: 2.4rem;
    transform: rotate(-250deg);
  }
  .prize-list .prize-item:nth-child(4) {
    top:2.3rem;
    left:1.76rem;
    transform: rotate(-210deg);
  }
  .prize-list .prize-item:nth-child(5) {
    top: 2.4rem;
    left: 0.94rem;
    transform: rotate(-160deg);
  }
  .prize-list .prize-item:nth-child(6) {
    top: 1.7rem;
    left: 0.4rem;
    transform: rotate(-111deg);
  }
  .prize-list .prize-item:nth-child(7) {
    top: 0.9rem;
    left: 0.32rem;
    transform: rotate(-69deg);
  }
  .prize-list .prize-item:nth-child(8) {
    top: 0.3rem;
    left: 0.94rem;
    transform: rotate(-20deg);
  }
  .prize-item {
    width: 0.7rem;
    font-size: 0;
  }

  .prize-pic img {
    width: 0.7rem;

  }
  .prize-prize_amount {
    font-size: 0.12rem;
  }
  .prize-type {
    font-size: 0.12rem;
  }
  .main {
    position: relative;
    width: 100%;
    /*min-height: 14.25rem;*/
    background: rgb(243, 109, 86);
    padding-bottom: 0.4rem;
  }
  .main-bg {
    width: 100%;
    height: 3rem;
    position: absolute;
    top: -1rem;
    left: 0;
    background: url("../../static/luckyDraw/luck_bg.png") no-repeat center top;
    background-size: 100%;
  }
  .bg-p {
    width: 100%;
    height: 1rem;
    background: rgb(252, 207, 133);
  }
  .content {
    position: absolute;
    top: -0.3rem;
    left: 0;
    background: rgb(243, 109, 86);
    width: 100%;
    height: 3rem;
    font-size: 0;
    color: #ffeb39;
  }
  .content div {
    text-align: left;
  }
  .tip {
    position: relative;
    margin: -1rem auto 0;
    width: 86%;
    border: 1px solid #fbc27f;
  }
  .tip-title {
    position: absolute;
    top: -0.21rem;
    left: 50%;
    transform: translate(-50%, 0);
    font-size:0.16rem;
    color: #fccc6e;
    background: rgb(243, 109, 86);
    padding: 0.1rem 0.2rem;
  }
  .tip-content {
    padding: 0.2rem 0.2rem;
    font-size: 0.14rem;
    color: #fff8c5;
  }
  .my-prize-log {
    position: relative;
    margin: 0.5rem auto 0;
    width: 86%;
    border: 1px solid #fbc27f;
  }
  .my-prize-log-title {
    position: absolute;
    top: -0.3rem;
    left: 50%;
    transform: translate(-50%, 0);
    font-size:0.16rem;
    color: #fccc6e;
    background: rgb(243, 109, 86);
    padding: 0.2rem 0.2rem;
  }
  .my-prize-log-item {
    padding-top: 0.2rem;
    font-size: 0.14rem;
    color: #fff8c5;
    overflow: hidden;
  }
  .my-prize-log-item1 {
    font-size: 0.14rem;
    color: #fff8c5;
    overflow: hidden;
  }
  .my-prize-log-item p:nth-child(1){
    padding: 0.1rem 0;
    float: left;
    width: 12%;
    text-align: center;
  }
  .my-prize-log-item p:nth-child(2){
    padding: 0.1rem 0;
    float: left;
    width: 35%;
    text-align: center;
  }
  .my-prize-log-item p:nth-child(3){
    padding: 0.1rem 0;
    float: left;
    width: 53%;
    text-align: center;
  }
  ul li{list-style-type: none;overflow: hidden;}
  .my-prize-log-item1 ul li p:nth-child(1){
    padding: 0.05rem 0;
    float: left;
    width: 10%;
    text-align: center;
  }
  .my-prize-log-item1 ul li p:nth-child(2){
    padding: 0.05rem 0;
    float: left;
    width: 35%;
    text-align: center;
  }
  .my-prize-log-item1 ul li p:nth-child(3){
    padding: 0.05rem 0;
    float: left;
    width: 55%;
    text-align: center;
  }
  .toast-mask {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    width: 100%;
    height: 100%;
  }
  .toast {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 20000;
    transform: translate(-50%, -50%);
    width: 70%;
    background: #fff;
    border-radius: 0.3125rem;
    padding: 0.2rem;
    background-color: rgb(252, 244, 224);
  }
  .toast-container {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px dotted #fccc6e;
  }
  .toast-picture {
    position: absolute;
    top: 0.2rem;
    left: 0;
    width: 100%;

  }
  .toast-pictrue-change {
    position: absolute;
    top: -1.5rem;
    left: -1.375rem;
    width: 17.5rem;
    height: 3.125rem;
  }
  .toast-title {
    padding: 1.2rem 0 0.4rem;
    font-size: 0.14rem;
    color: #fc7939;
    text-align: center;
  }
  .toast-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.2rem;
  }
  .toast-btn div {
    background-image: -moz-linear-gradient(
      -18deg,
      rgb(242, 148, 85) 0%,
      rgb(252, 124, 88) 51%,
      rgb(252, 124, 88) 99%
    );

    background-image: -ms-linear-gradient(
      -18deg,
      rgb(242, 148, 85) 0%,
      rgb(252, 124, 88) 51%,
      rgb(252, 124, 88) 99%
    );
    background-image: -webkit-linear-gradient(
      -18deg,
      rgb(242, 148, 85) 0%,
      rgb(252, 124, 88) 51%,
      rgb(252, 124, 88) 99%
    );
    box-shadow: 0px 4px 0px 0px rgba(174, 34, 5, 0.7);
    width: 1rem;
    height: 0.4rem;
    border-radius: 1rem;
    text-align: center;
    line-height: 0.4rem;
    color: #fff;
    font-size: 0.16rem;
  }
  .close {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    width: 0.4rem;
    height:0.4rem;
    background: url("../../static/luckyDraw/close_store.png") no-repeat center top;
    background-size: 100%;
  }
</style>

